import React, {FC, useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  LayoutAnimation,
  Alert,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootStackParamList} from '../../../../App';
import RadioProtocol from './RadioProtocol';
import icon_arrow from '../../../assets/icon_arrow.png';
import icon_wx_small from '../../../assets/icon_wx_small.png';
import icon_main_logo from '../../../assets/icon_main_logo.png';
type PropsType = {
  setLoginType: (value: 'quick' | 'input') => void;
};
const QuickLogin: FC<PropsType> = (props: PropsType) => {
  const {setLoginType} = props;
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
  const [checked, setChecked] = useState<boolean>(false);
  const login = () => {
    if (!checked) {
      Alert.alert('请同意并勾选用户协议');
      return;
    }
    navigation.replace('MainTab');
  };
  return (
    <View style={styles.root}>
      <RadioProtocol checked={checked} setChecked={setChecked} />
      <TouchableOpacity
        style={styles.otherLoginButton}
        activeOpacity={0.7}
        onPress={() => {
          LayoutAnimation.spring();
          setLoginType('input');
        }}>
        <Text style={styles.otherLoginTxt}>其他登录方式</Text>
        <Image source={icon_arrow} style={styles.otherLoginImg} />
      </TouchableOpacity>
      <TouchableOpacity style={styles.wxLoginButton} activeOpacity={0.7}>
        <Image source={icon_wx_small} style={styles.wxLoginImg} />
        <Text style={styles.wxLoginTxt}>微信登录</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.oneKeyLoginButton}
        activeOpacity={0.7}
        onPress={() => login}>
        <Text style={styles.oneKeyLoginTxt}>一键登录</Text>
      </TouchableOpacity>

      <Image source={icon_main_logo} style={styles.mainLogoImg} />
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    flexDirection: 'column-reverse',
    alignItems: 'center',
    paddingHorizontal: 56,
    paddingBottom: 40,
  },
  protocolLayout: {
    width: '100%',
    flexDirection: 'row',
  },
  radioImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
  },
  labelTxt: {
    fontSize: 12,
    color: '#999',
    marginLeft: 6,
  },
  protocolTxt: {
    fontSize: 12,
    color: '#1020ff',
  },
  otherLoginButton: {
    flexDirection: 'row',
    marginBottom: 100,
    paddingHorizontal: 20,
    paddingVertical: 10,
    alignItems: 'center',
  },
  otherLoginTxt: {
    fontSize: 14,
    color: '#1020ff',
  },
  otherLoginImg: {
    width: 16,
    height: 16,
    resizeMode: 'contain',
    transform: [{rotate: '180deg'}],
    marginLeft: 6,
  },
  wxLoginButton: {
    width: '100%',
    height: 56,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#05c160',
    borderRadius: 28,
  },
  wxLoginImg: {
    width: 40,
    height: 40,
    resizeMode: 'contain',
    marginEnd: 6,
  },
  wxLoginTxt: {
    fontSize: 18,
    color: 'white',
  },
  oneKeyLoginButton: {
    width: '100%',
    height: 56,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ff2442',
    borderRadius: 28,
    marginBottom: 20,
  },
  oneKeyLoginTxt: {
    fontSize: 18,
    color: 'white',
  },
  mainLogoImg: {
    width: 180,
    height: 95,
    resizeMode: 'contain',
    position: 'absolute',
    top: 160,
  },
});
export default QuickLogin;
